{extend name="layout/layout"}
{block name="content"}
<main class="user_page  ">
    <section class="">
        <div class="layui-main">
            <div class="user_con">
                <div class="user_headpage" data-load="user_active_header">
                    {include file="user_activity/page_menu" menu='info' id="$id" /}
                </div>
                <div class="right_main ">
                    <p class="ft24 mb10 ft-bold">活動资讯</p>
                    <div class="block_com" style="min-height: 80vh;">
                        <div class="active_w1 active3 " style="margin:  0 auto;">
                            <form onsubmit="return false;" class="layui-form" lay-filter="info-form">
                                <div class="layui-upload-drag mb80 w100" id="ID-upload-demo-drag">
                                    <div class="b1 layui-hide">

                                        <i class="layui-icon layui-icon-upload"></i>
                                        <div>就缺一張好看的活動照請上傳 1080 X 540 pixel 且小於4MB</div>
                                    </div>
                                    <div class=" img_box" id="ID-upload-demo-preview" style="height:200px;">
                                        <img src="{$act.logo}" alt="上传成功后渲染">
                                    </div>
                                </div>
                                <input type="hidden" name="logo" value="{$act.logo}" class="logo-input">
                                <div class="layui-form-item">
                                    <div class="label must">主辦單位名稱</div>
                                    <div class="">
                                        <input type="text" name="organizer_name" value="{$act.organizer_name}"
                                               lay-verify="required" placeholder="请填写主办单位"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="label must">活動名稱
                                    </div>
                                    <div class="">
                                        <input type="text" name="name" value="{$act.name}" lay-verify="required"
                                               placeholder="请填写活動名稱"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="label must">活動時間<p class=" tip1">開始時間</p>
                                    </div>
                                    <div class="d-flex">
                                        <input type="text" name="begin_time" value="{$act.begin_time}"
                                               lay-verify="required"
                                               placeholder="请填写開始時間" autocomplete="off" class="layui-input time-input">

                                    </div>
                                    <p class=" tip1 mb10">結束時間</p>
                                    <div class="d-flex">
                                        <input type="text" name="end_time" value="{$act.end_time}" lay-verify="required"
                                               placeholder="请填写結束時間" autocomplete="off" class="layui-input time-input">

                                    </div>
                                </div>

                                <div class="layui-form-item">
                                    <div class="label must">活動地點</p>
                                    </div>
                                    <div class="">
                                        <div class="mb12 region-select">
                                            <lay-tree-select v-model="form.region_id" :data="region"
                                                             placeholder="请选择活动地点"></lay-tree-select>
                                            <input type="hidden" name="region_id" value="{$act.region_id}" class="region-val-input">
                                        </div>

                                        <input type="text" name="address_detail" value="{$act.address_detail}"
                                               lay-verify="required" placeholder="详细地址"
                                               autocomplete="off" class="layui-input mb12">
                                    </div>
                                </div>
                                <div class="mt40 d-flex jc-s al-c">
                                    <button class="layui-btn layui-btn-lg w100 layui-bg-orange next-btn"
                                            onclick="save()">储存
                                    </button>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<script type="text/javascript" src="__ROOT__/public/activity/js/vue3.js?at={:date('his')}"></script>
<script type="text/javascript" src="__ROOT__/public/activity/js/layui-vue.js?at={:date('his')}"></script>
<style>
    .layui-dropdown-content {
        position: absolute;
        z-index: 99999999;
        background-color: #fff;
        box-sizing: border-box;
        border: 1px solid #e4e7ed;
        border-radius: var(--dropdown-content-border-radius);
        box-shadow: 0 2px 12px #0000001a;
    }
</style>
<script>
    var app = Vue.createApp({
        data() {
            return {
                form: {region_id: Number('{$act.region_id}')},
                region: JSON.parse('{:json_encode($regionTree)}')
            }
        },
        watch: {
            'form.region_id': function (val) {
                $('.region-val-input').val(val)
                console.log()
            }
        }
    });
    app.use(LayuiVue);
    app.mount('.region-select')
</script>
<script>
    layui.use(function () {
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        var laydate = layui.laydate;

        upload.render({
            elem: '#ID-upload-demo-drag',
            url: '/api/upload', // 实际使用时改成您自己的上传接口即可。
            before: function (obj) {
                // 预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#ID-upload-demo-preview img').attr('src', result); // 图片链接（base64）
                });
            },
            done: function (res) {
                if (res.code === 1) {
                    $('.logo-input').val(res.data.url);
                }
            }
        });
        laydate.render({
            elem: '.time-input',
            type: 'datetime',
            fullPanel: true // 2.8+
        });
    })

    function save() {
        var data = layui.form.val('info-form');
        $.quickPost('/activity/user/activity/{$act.id}/info', data)
    }
</script>

{/block}
